<template>
    <div class="header">
        <van-row>
            <van-col span="2" class="icon"><van-icon name="wap-nav" size="25px" /></van-col>
            <van-col span="20">
                <van-search v-model="keyword" shape="round" background="#f62020" placeholder="请输入搜索关键词"
                    @search="onSearch" />
            </van-col>
            <van-col span="2" class="icon">
                <van-icon name="user" size="25px" />
            </van-col>
        </van-row>
        <div class="tabs">
            <van-grid class="grids" :column-num="5" :border="false" icon-size="40px">
                <van-grid-item v-for="item in tablist" :key="item.text" :icon="item.icon" :text="item.text" />
            </van-grid>
        </div>
    </div>
    <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />

    <!--轮播图-->
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img class="swipeimg" :src="image" />
        </van-swipe-item>
    </van-swipe>

    <!--秒杀内容-->
    <div class="ms">
        <van-row>
            <van-col span="6">
                <div class="lefttext">
                    <span>华杉秒杀</span><br>
                    <span>限时低价</span>

                    <div
                        style="background-color: aliceblue; border-radius: 20px; width: 65px; font-size: 14px; color: red; margin-top: 8px;">
                        去抢购 <van-icon name="play-circle-o" style="color: red;" />
                    </div>

                </div>
            </van-col>

            <van-col span="18" class="mslist">
                <van-grid :column-num="4" icon-size="50px">
                    <van-grid-item v-for="item in mslist" :key="item.id" :icon="item.img" :text="item.price" />
                </van-grid>
            </van-col>
        </van-row>
    </div>
    <!--商品展示-->
    <van-grid :border="false" :column-num="2" style="margin-bottom: 50px;">
        <van-grid-item v-for="item in productData" :key="item.id">
            <van-image :src="item.img" width="180px" height="180px"/>
            <p>{{ item.name }}</p>
            <span class="price" style="color: red; font-weight: 800; margin-right: 140px; font-size: 16px;">￥{{item.price}}</span>
        </van-grid-item>
        <!-- <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            <p>科沃斯T50 PRO扫地机器人扫拖一体自动清洗洗地机智能家用双机械臂毛发0缠水箱版本</p>

            <span class="price" style="color: red; font-weight: 800; margin-right: 146px;">￥16288</span>
        </van-grid-item> -->

    </van-grid>



    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster" :to="({name:'moveCategory'})">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting">个人中心</van-tabbar-item>
    </van-tabbar>

</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
    import {ProductApi} from '@/api'


    const active = ref(0)
const keyword = ref('')

const onSearch = () => { 
    console.log(keyword.value);
    
}

//图标数据：
const tablist=ref([
    { icon: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', text: '华杉超市' },
    { icon: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png', text: '家用电器' },
    { icon: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png', text: '美妆服饰' },
    { icon: 'https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png', text: '充值中心' },
    { icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png', text: 'Plus会员' }
])
//轮播图数据：
const images = ref([
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/261119/34/16412/86700/67a0e0b8Ff0390f1f/62468e5266b2233f.jpg',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/266043/19/16601/148425/67a30e80F629ec4a7/221f3edadb06723c.jpg',
])
//秒杀的数据
const mslist = ref([
    { id: '101', img: 'https://m.360buyimg.com/seckillcms/jfs/t1/112018/8/50829/141187/66f4ca84Fb58ecf93/e9777e7581615150.jpg', price: '￥9.3' },
    { id: '102', img: 'https://m.360buyimg.com/seckillcms/jfs/t1/254315/25/24949/171845/67bc1767F4194aad5/6c03b23b9b393a68.jpg', price: '￥0.99' },
    { id: '103', img: 'https://m.360buyimg.com/seckillcms/jfs/t1/247236/18/27899/49941/67526e15Fa5e4c54e/5363117bd6027534.jpg', price: '￥16288' },
    { id: '104', img: 'https://m.360buyimg.com/seckillcms/jfs/t1/133922/2/42731/130589/66becacaF5bad9bae/b43a0bb1c2dd2356.jpg', price: '￥2689' },
])

//商品的定义
const productData = ref([] as any)

onMounted(()=>{
callProductApi()
})

const callProductApi = () => {
    ProductApi.select.call().then((res:any)=>{
        console.log(res);
        images.value = res.map((item:any)=>{
            return item.img
        })
        // 获取前6个数据
        images.value = images.value.slice(0,6)
        //商品秒杀
        mslist.value = res.map((item:any)=>{
            return {
                id: item.id,
                img: item.img,
                price: '￥' + item.price
            }
        })
        mslist.value = mslist.value.slice(0,4)
        //商品获取
        productData.value=res
    })
}

</script>
<style scoped>
.header{
    background-color: #f62020;
    height: 100%;
}
.van-search{
    height: 36px;
    
}
.icon{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}
.tabs{
    width: 450px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 8px;
    /* margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px; */
    margin:5px 5px 5px 5px;
    padding-left: 10px;
    .grids{
        margin: 5px 5px;
        padding-top: 5px;
    }
}
.ms{
    height: 120px;
    background-color: #c80707;
    margin: 10px 10px;
    border-radius: 10px;
    .lefttext{
        color: #ffffff;
        font-size: 18px;
        padding: 10px 10px;
    }
    .mslist{
        padding-top: 6px;
        
    }
}
:deep(.van-grid-item__text){
    font-size: 13px !important;
    color: red !important;
}
:deep(.van-search__field){
     height: 30px !important;
}
.swipeimg{
    width: 100%;
    height: 230px;
}
</style>
